<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html>
<head>
    <title>租客主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: linear-gradient(to bottom right, #f5f7fa, #c3cfe2) fixed;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(to right, #4CAF50, #6a9e8d);
            overflow: hidden;
            display: flex;
            justify-content: space-between;
        }


        .navbar .btn {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .navbar .btn a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            cursor: pointer;
            border-radius: 5px;
        }

        .navbar .btn a:hover {
            background-color: #575757;
        }

        .navbar .btn a img {
            margin-right: 5px;
            vertical-align: middle;
            height: 25px;
            width: 25px;
            margin-left: 5px;
        }

        .left-btn,
        .right-btn {
            width: 200px;
        }

        /* 页面选择显示 */
        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        .container {
            min-height: calc(100vh - 120px);
        }


        /* 首页 Hero 区域 */
        .hero-section {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(to bottom, rgba(144, 225, 148, 0.8), rgba(130, 158, 187, 0.8)), url('${pageContext.request.contextPath}/static/hero.jpg') no-repeat center center/cover;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            margin-top: 10px;
            margin-bottom: 40px;
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .subtitle {
            font-size: 20px;
            color: #333;
            margin-top: 15px;
            font-weight: 500;
        }

        /* 功能模块容器 */
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 30px;
            margin-bottom: 60px;
        }

        /* 单个功能卡片 */
        .feature-card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 25px;
            width: calc(50% - 60px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .feature-card h3 {
            color: #2d3748;
            margin-bottom: 12px;
            font-size: 22px;
        }

        .feature-card p {
            color: #4a5568;
            line-height: 1.6;
            font-size: 15px;
        }

        /* 租户信息卡片 */
        .profile-card {
            background-color: #ffffffee;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 30px;
            max-width: 800px;
            margin: 40px auto;
            transition: transform 0.3s ease;
        }

        .profile-card:hover {
            transform: translateY(-5px);
        }

        .title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
            font-weight: bold;
        }

        /* 表格样式增强 */
        .profile-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
        }

        .profile-table th,
        .profile-table td {
            padding: 14px 20px;
            border-bottom: 1px solid #e2e8f0;
            text-align: center;
        }

        .profile-table th {
            background-color: #f7fafc;
            color: #2d3748;
            font-weight: 600;
        }

        .profile-table tr:last-child td {
            border-bottom: none;
        }

        .profile-table tr:nth-child(even) {
            background-color: #f9fafb;
        }

        .footer-btn-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .footer-btn {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #4CAF50;
            color: #f2f2f2;
            cursor: pointer;
        }

        .footer-btn:hover {
            background-color: #575757;
            transform: scale(1.05);
            transition: background-color 0.3s ease;
        }

    </style>
</head>
<body>

<!-- 导航栏 -->
<div class="navbar">
    <div class="btn left-btn">
        <a>
            <img src="${pageContext.request.contextPath}/static/LOGO.svg" alt="主页">欢迎${account.username}
        </a>
    </div>

    <div class="btn">
        <a onclick="showSection('home')">首页</a>
        <a href="${pageContext.request.contextPath}/house">查看房源信息</a>
        <a onclick="showSection('profile')">个人信息</a>
        <a href="${pageContext.request.contextPath}/page/tenant/repair.jsp">维修申请</a>
    </div>

    <div class="btn right-btn">
        <a href="${pageContext.request.contextPath}/logout" onclick="return confirm('确定要退出登录吗？')">
            退出登录
            <img src="${pageContext.request.contextPath}/static/exit.svg" alt="退出登录">
        </a>
    </div>
</div>

<!-- 页面主体 -->
<div class="container">

    <!-- 首页内容 -->
    <div id="home" class="content-section active">
        <div class="hero-section">
            <h2>欢迎使用 LILI 房屋信息租赁系统</h2>
            <p class="subtitle">一站式房屋租赁管理平台，为您提供便捷的租房服务体验</p>
        </div>

        <div class="features">
            <div class="feature-card">
                <h3>🏠 房源浏览</h3>
                <p>查看所有可租房源信息，包括详细描述、价格及图片展示。</p>
            </div>
            <div class="feature-card">
                <h3>🔔 消息通知</h3>
                <p>实时接收房东或管理员发送的通知与提醒，确保重要信息不遗漏。</p>
            </div>
            <div class="feature-card">
                <h3>📊 个人中心</h3>
                <p>随时查看您的个人信息、租房记录与支付账单，管理更高效。</p>
            </div>
        </div>
    </div>


    <!-- 租客个人信息 -->
    <div id="profile" class="content-section">
        <div class="profile-card">
            <div class="title">以下是您的信息</div>
            <table class="profile-table">
                <tr>
                    <th></th>
                    <th>信息</th>
                </tr>

                <tr>
                    <td>ID</td>
                    <td>${tenant.tenantId}</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>${account.username}</td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td>${tenant.name}</td>
                </tr>
                <tr>
                    <td>银行卡</td>
                    <td>${tenant.bankAccount}</td>
                </tr>
                <tr>
                    <td>紧急联系人</td>
                    <td>${tenant.emergencyName}</td>
                </tr>
                <tr>
                    <td>紧急联系人电话</td>
                    <td>${tenant.emergencyPhone}</td>
                </tr>
                <c:choose>
                    <c:when test="${not empty tenantPhones and fn:length(tenantPhones) == 1}">
                        <tr>
                            <td>电话信息</td>
                            <td>${tenantPhones[0]}</td>
                        </tr>
                    </c:when>

                    <c:when test="${not empty tenantPhones and fn:length(tenantPhones) > 1}">
                        <tr>
                            <td>电话信息</td>
                            <td>
                                <ul style="margin: 0; padding-left: 20px;">
                                    <c:forEach items="${tenantPhones}" var="phone" varStatus="status">
                                        <li>电话${status.count}：${phone}</li>
                                    </c:forEach>
                                </ul>
                            </td>
                        </tr>
                    </c:when>
                    <c:otherwise>
                        <tr>
                            <td>电话信息</td>
                            <td><p>无</p></td>
                        </tr>
                    </c:otherwise>
                </c:choose>
            </table>
            <div class="footer-btn-box">
                <button class="footer-btn" onclick="window.location.href='${pageContext.request.contextPath}/page/tenant/update.jsp'">修改信息</button>
            </div>
        </div>
    </div>

</div>
<jsp:include page="/page/model/footer.jsp" />

<script>
    function showSection(sectionId) {
        // 获取所有内容块
        const sections = document.querySelectorAll('.content-section');
        sections.forEach(section => {
            section.classList.remove('active');
        });

        // 显示选中的内容块
        document.getElementById(sectionId).classList.add('active');
    }
</script>

</body>
</html>